<template>
    <div class="pagination">
        <button :disabled="pageNo === 1" @click="changePage(pageNo - 1)" class="prev">上一页</button>
        <button v-show="getPages.start > 1" @click="changePage(1)">1</button>

        <button v-show="getPages.start > 2">···</button>

        <button
            v-for="item in getPages.pages"
            :key="item"
            :class="pageNo === item ? 'active' : ''"
            @click="changePage(item)"
        >
            {{ item }}
        </button>

        <button v-show="getPages.end < totalPages - 1">···</button>
        <button v-show="getPages.end < totalPages" @click="changePage(totalPages)">{{ totalPages }}</button>
        <button @click="changePage(pageNo + 1)" :disabled="pageNo === totalPages" class="next">下一页</button>

        <button style="margin-left: 30px" class="total">共 {{ total }} 条</button>
    </div>
</template>

<script>
export default {
    name: "Pagination",
    props: ["total", "pageNo", "pageSize", "changePage", "totalPages"],
    computed: {
        // 计算连续页码
        getPages() {
            let pages = []; // 保存连续页码
            let start = 1; // 连续页码开始页
            let end = 1; // 连续页码结束页

            // 首先判断总页数是否小于连续页长度,连续页的开始就是1 结束就是连续页的长度
            if (this.totalPages <= 5) {
                start = 1;
                end = this.totalPages;
            } else {
                // 如果总页数大于连续页长度,就要判断当前页码是不是在连续页的中间
                if (this.pageNo <= 2) {
                    // 如果当前页码小于等于2,连续页的开始就是1 结束就是连续页的长度
                    start = 1;
                    end = 5;
                } else if (this.pageNo >= this.totalPages - 1) {
                    // 如果当前页码大于等于总页数-1,连续页的开始就是总页数-连续页的长度+1 结束就是总页数
                    start = this.totalPages - 2;
                    end = this.totalPages;
                } else {
                    // 如果当前页码在连续页的中间,连续页的开始就是当前页码-1 结束就是当前页码+1
                    start = this.pageNo - 2;
                    end = this.pageNo + 2;
                }
            }
            // 循环连续页码的开始和结束,把连续页码保存到pages中
            for (let i = start; i <= end; i++) {
                pages.push(i);
            }
            return {
                start,
                end,
                pages,
            };
        },
    },
};
</script>

<style lang="less" scoped>
.pagination {
    button {
        margin: 0 5px;
        background-color: #f4f4f5;
        color: #606266;
        outline: none;
        border-radius: 2px;
        padding: 0 4px;
        vertical-align: top;
        display: inline-block;
        font-size: 13px;
        min-width: 35.5px;
        height: 28px;
        line-height: 28px;
        cursor: pointer;
        box-sizing: border-box;
        text-align: center;
        border: 0;

        &.prev,
        &.next {
            width: 60px;
        }

        &[disabled] {
            color: #c0c4cc;
            cursor: not-allowed;
        }

        &.active {
            cursor: not-allowed;
            background-color: #409eff;
            color: #fff;
        }
    }
}
</style>
